import { PlusOutlined, CloseOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { CheckCard, ProColumns } from '@ant-design/pro-components';
import { ProCard, ProTable } from '@ant-design/pro-components';
import {
  Button,
  Input,
  message,
  Image,
  Space,
  Drawer,
  Calendar,
  Col,
  Row,
  Card,
  Select,
  Tabs,
  Radio,
  Badge,
  Empty,
  Typography,
  Table,
  List,
  Skeleton,
  Avatar,
  DatePicker,
  Popconfirm
} from 'antd';
import { useState, useRef, useEffect } from 'react';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import type { Moment } from 'moment';
import { useHistory } from 'react-router-dom'
import {
  reqRegisterList,
  reqDoctorList,
  reqSchedulingByDoctor,
  reqRrderCreate,
  getOrganizeList,
  reqRrderUpdate,
  reqRrderList
} from '@/services/register';

import { TableListPagination } from './data';
import { EditModal } from './components/EditModal';
import { TeamEditModal } from './components/TeamEditModal';

import UserHead from '@/components/UserHead'

import styles from './index.module.less'
import classNames from 'classnames';
import { RangePickerProps } from 'antd/lib/date-picker';
import moment from 'moment';

const { Search } = Input;
const { Meta } = Card;

export default () => {
  const histroy = useHistory()
  const [type, setType] = useState('table');
  const [open, setOpen] = useState(false);
  const [iscreated, setIscreated] = useState(true);
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const actionRef = useRef<any>();
  const appointDt = useRef<any>();
  const [activeKey, setActiveKey] = useState<any>('1');
  const [row, setRow] = useState<any>();
  const organizeRef = useRef();
  const [doctorData, setDoctorData] = useState<any>()

  const [selAppointDate, setSelAppointDate] = useState<string>();
  const [initSelApointDate, setInitSelApointDate] = useState<any>(moment());

  // 科室
  const [dept, setDept] = useState(1)

  const pageSize = 10;

  const handleModal = (show: boolean, row: any = null) => {
    console.log('actionRef?.current ===========:>> ', actionRef?.current);
    setRow(row);
    setIsOpen(show);
    organizeRef?.current?.reload();
    actionRef?.current?.reload()
  }
  const handleTableList = async (params: TableListPagination) => {
    console.log('params :>> ', params);
    let reqData = {
      ...params,
      pageNum: params.current,
      pageSize: params.pageSize,
    };

    const res = await reqRegisterList(reqData);
    console.log('res ====:>> ', res);
    if (res?.resultCode === "00000000") {
      const { result, total } = res?.data;
      console.log('object :>> ', result, total);
      setSearchResultData(result);
      return {
        data: result,
        success: true,
        total: total,
      };
    }
  };

  const handleCreate = () => {
    setIsOpen(true);
    setRow({});
    setIscreated(false);
  }


  // 去详情
  function goDetail(id: string) {
    histroy.push(`/registerDetail/${id}`)
  }

  const [newParams, setNewParams] = useState({})

  function onSearch(key: string | number) {
    // setNewParams(prv => ({
    //   ...prv,
    //   key
    // }))
    handleTableList({key,"pageSize":100});
  }

  // 当前医生id
  const [doctorId, setDoctorId] = useState<any | null>(null)

  // 当前医生可预约时间
  const [doctorTimeList, setDoctorTimeList] = useState<[] | null>(null)

  // 最外层医生选择弹窗
  const [drawerOpen, setDrawer] = useState<boolean>(false);

  // 预约时间段选择弹窗
  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);

  const [doctorDateArr, setDoctorDataArr] = useState<[] | null>(null);

  const [currentDate, setCurrentDate] = useState<string>();

  const [searchResultData, setSearchResultData] = useState<any>();
  const [searchTodayResultData, setSearchTodayResultData] = useState<any>();

  const [apInfo, setApInfo] = useState<any>();

  let currentDateLoc = "";

  // 年月日日期选择弹窗
  function onCloseCalendar() {
    setDoctorTimeList(null)
    setDoctorId(null)
    setCalendarOpen(false)
  }


  // 点击医生卡片
  async function showCalendarOpen(item: any) {
    getTimeTwo();
    setDoctorData((prv: any) => ({
      ...prv,
      doctorItem: item,
    }))
    setDoctorId(item?.id)
    await onSelectLoadData(item?.id);
    setCalendarOpen(true)
  }


  // 选中预约时间段
  async function onSelectTime(item: any, dtstr:string) {
    if(!item) return;
    const reqData = {
      projectName: 1,
      tyPatientId: row?.id,
      tyPatientName: row?.name,
      tyUserId: item?.id,
      tyUserName: item?.realName,
      appointDate: selAppointDate?.replace('年','-').replace('月','-').replace('日',''),
      appointTime: dtstr,
      money: 0,
      originalPrice: 0,
      discountPrice: 0,
      receiveMethod: 1,
      dept,
    };
    // return console.log('onSelectTime==== :>> ', doctorData?.appointTime);
    console.log(reqData)
    let res;
    // 是否已挂号
    // if (doctorData?.orderId) {
    //   res = await reqRrderUpdate({
    //     id: doctorData?.orderId,
    //     ...reqData,
    //   })
    // } else {
    //   res = await reqRrderCreate(reqData)
    // }

    res = await reqRrderCreate(reqData)
    if (res?.resultCode === "00000000") {
      message.success('成功');
      setDrawer(false)
      //await handleTableList({})
      await initMainData();
    }else{
      message.error(res?.message)
    }
    
    //console.log('onSelectTime==== :>> ', doctorData, item, res);


    // onCloseCalendar();
    // setDrawer(false);
    // organizeRef?.current?.reload();
    // actionRef?.current?.reload()
    // initSelApointDate
  }


  const [doctorList, setDoctorList] = useState([])

  // 显示医生选择弹窗
  const showDrawer = async (item: any) => {
    //
    //setDoctorData(item);
    setRow(item);

    const res = await reqDoctorList({})
    setDoctorList(res?.data)
    setDrawer(true);
    init();
    //appointDt.current.clear();
    console.log("---->",appointDt.current.blur());
  };

  const init = () => {
    let todayAppointDate = new Date();
    let year = todayAppointDate.getFullYear();
    let month = todayAppointDate.getMonth()+1;
    let day = todayAppointDate.getDate();
    let daystr = day < 10 ? "0"+day : day+"";
    if(month < 10) {
      setSelAppointDate(year+"年0"+month+"月"+daystr+"日")
    }else{
      setSelAppointDate(year+"年"+month+"月"+daystr+"日")
    }
  }

  const initMainData = async () => {
    await getTodayAppointment();
  }

  const getTodayAppointment = async ()=>{
    let reqData = {
      appointDate: today(0),
      pageNum: 1,
      pageSize: 100,
    };
    const res = await reqRrderList(reqData);
    if (res?.resultCode === "00000000") {
      const { result, total } = res?.data;
      setSearchTodayResultData(result);
    }
  }

  useEffect(()=>{
    initMainData()
  },[])


  const onCloseDrawer = () => {
    // 清空当前医生选中
    setDoctorId(null)
    // 清空当前医生预约时间选中列表
    setDoctorList(null)
    setDoctorData(null)
    setDoctorTimeList(null)
    setCalendarOpen(false)
    setDept(1);
    setDrawer(false);
    onCloseCalendar();
    init()
  };

  const onPanelChange = (value: Moment, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };

  const onSelect = async (newValue: Moment) => {
    const res = await reqSchedulingByDoctor({
      tyUserId: doctorId,
      schedulingDate: newValue.format('YYYY-MM-DD')
    });
    if (res?.resultCode === "00000000") {
      setDoctorTimeList(res?.data)

      setDoctorData((prv: any) => ({
        ...prv,
        appointDate: newValue.format('YYYY-MM-DD'),
      }))
    } else {
      message.error(res?.message)
    }

    console.log(newValue.format('YYYY-MM-DD'));
  };

  const onChangeCheckCard = async (item: string) => {
    if(!item) return;
    setCurrentDate(item);
    currentDateLoc = item;
    await onSelectLoadData(doctorId);
  }

  const today = (gap:number)=>{
    // 获取当前日期
    var date = new Date();
    // 获取当前月份
    var nowMonth = date.getMonth() + 1 + gap;
    // 获取当前是几号
    var strDate = date.getDate();
    // 添加分隔符“-”
    var seperator = "-";
    // 对月份进行处理，1-9月在前面添加一个“0”
    if (nowMonth >= 1 && nowMonth <= 9) {
      nowMonth = "0" + nowMonth;
    }
    // 对月份进行处理，1-9号在前面添加一个“0”
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
    return date.getFullYear() + seperator + nowMonth + seperator + strDate;
  }

  const getTimeTwo = ()=>{
    let start = today(0);
    let end = today(1);
    //初始化日期列表，数组
    let diffdate = new Array();
    let arr = []
    let i = 0;
    //开始日期小于等于结束日期,并循环
    while (start <= end) {
        diffdate[i] = start;
        //获取开始日期时间戳
        let stime_ts = new Date(start).getTime();
        //增加一天时间戳后的日期
        let next_date = stime_ts + (24 * 60 * 60 * 1000);
        //拼接年月日，这里的月份会返回（0-11），所以要+1
        let next_dates_y = new Date(next_date).getFullYear() + '-';
        let next_dates_m = (new Date(next_date).getMonth() + 1 < 10) ? '0' + (new Date(next_date).getMonth() + 1) + '-' : (new Date(next_date).getMonth() + 1) + '-';
        let next_dates_d = (new Date(next_date).getDate() < 10) ? '0' + new Date(next_date).getDate() : new Date(next_date).getDate();
        start = next_dates_y + next_dates_m + next_dates_d;
        //增加数组key
        i++;
    }
    setCurrentDate(diffdate[0]);
    currentDateLoc = diffdate[0];
    setDoctorDataArr(diffdate.slice(0,7));
    return diffdate;
  }

  const onSelectLoadData = async (doctorId:any) => {
    // 获取当前日期
    var date = new Date();
    // 获取当前月份
    var nowMonth = date.getMonth() + 1;
    // 获取当前是几号
    var strDate = date.getDate();
    // 添加分隔符“-”
    var seperator = "-";
    // 对月份进行处理，1-9月在前面添加一个“0”
    if (nowMonth >= 1 && nowMonth <= 9) {
      nowMonth = "0" + nowMonth;
    }
    // 对月份进行处理，1-9号在前面添加一个“0”
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
    var nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;

    if(!currentDate) {
      setCurrentDate(nowDate);
      currentDateLoc = nowDate;
    }

    const res = await reqSchedulingByDoctor({
      tyUserId: doctorId,
      schedulingDate: currentDateLoc
    });
    if (res?.resultCode === "00000000") {
      setDoctorTimeList(res?.data)

      setDoctorData((prv: any) => ({
        ...prv,
        appointDate: currentDateLoc
      }))
    } else {
      message.error(res?.message)
    }

    console.log('2024-04-02');
  };



  const [isTeamOpen, setIsTeamOpen] = useState(false);

  const teamRef = useRef(null);

  function handleTeamOpenModal(bool: any) {
    setIsTeamOpen(false)
    organizeRef?.current?.reload();
    actionRef?.current?.reload()
  }

  console.log('isTeamOpen :>> ', isTeamOpen);

  // 重新选择时间
  function resetTime() {
    // setDoctorData((prv: any) => ({
    //   ...prv,
    //   appointDate: null,
    // }))
    setDoctorTimeList(null)
    onCloseCalendar();
  }
  const columns = [
    {
      title: '姓名',
      key: 'name',
      search: false,
      align: 'center',
      width: 160,
      render: (text, row: any) => (
        <UserHead data={row} />
      ),
    },
    {
      title: '性别',
      key: 'gender',
      ellipsis: true,
      search: false,
      align: 'center',
      render: (text, row: any) => (
        <div>{row?.gender == 0 ? '男' : '女'}</div>
      ),
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 180,
      search: false,
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'phoneNum',
      width: 120,
      search: false,
      align: 'center',
    },
    {
      title: '证件ID',
      dataIndex: 'cardID',
      width: 200,
      search: false,
      align: 'center',
    },
    {
      title: '预约日期',
      dataIndex: 'appointDate',
      width: 120,
      search: false,
      align: 'center',
    },
    {
      title: '预约时间',
      dataIndex: 'appointTime',
      width: 120,
      search: false,
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      width: 200,
      search: false,
      align: 'center',
    },
    {
      title: '操作',
      valueType: 'option',
      dataIndex: 'id',
      align: 'center',
      width: 160,
      fixed: 'right',
      render: (text, row) => [
        <a key="1" onClick={() => showDrawer(row)}>挂号</a>,
        <a key="2" onClick={() => goDetail(row?.id)}>详情</a>,
      ],
    },
  ];

  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    if(!date) return;
    let selDate = date.format('YYYY年MM月DD日');
    setSelAppointDate(selDate);
    //setInitSelApointDate(date.format('YYYY-MM-DD'));
  };

  const columnsPending = [
    {
      title: '姓名',
      key: 'tyPatientName',
      search: false,
      align: 'center',
      dataIndex: 'tyPatientName',
      width: 80,
      // render: (text, row: any) => (
      //   <UserHead data={row} />
      // ),
    },
    // {
    //   title: '性别',
    //   key: 'gender',
    //   ellipsis: true,
    //   search: false,
    //   align: 'center',
    //   render: (text, row: any) => (
    //     <div>{row?.gender == 1 ? '男' : '女'}</div>
    //   ),
    // },
    
    {
      title: '手机号',
      dataIndex: 'phoneNum',
      width: 120,
      search: false,
      align: 'center',
    },
    
    {
      title: '预约时间',
      dataIndex: 'appointTime',
      width: 120,
      search: false,
      align: 'center',
    },
    // {
    //   title: '操作',
    //   valueType: 'option',
    //   dataIndex: 'id',
    //   align: 'center',
    //   width: 160,
    //   fixed: 'right',
    //   render: (text, row) => [
    //     <a key="2" onClick={() => goDetail(row?.id)}>删除</a>,
    //   ],
    // },
  ];

  const selCheck = (item:any, dtstr:string)=>{
    // 病人row
    // 医生item
    // 预约日期 dtstr
    onSelectTime(item, dtstr);
  }

  async function reqOrganizeList(params: TableListPagination) {
    let reqData = {
      ...params,
      pageNum: params.current,
      pageSize: params.pageSize,
    };
    const res = await getOrganizeList(reqData);
    console.log('res ====:>> ', res);
    if (res?.resultCode === "00000000") {
      const { result, total } = res?.data;
      return {
        data: result,
        success: true,
        total: total,
      };
    }
  };

  const disabledDate: RangePickerProps['disabledDate'] = current => {
    return current <= moment().startOf('day');
  };


  const organizeColumns = [
    {
      title: '组织ID',
      dataIndex: 'id',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '编号',
      dataIndex: 'num',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'phoneNum',
      ellipsis: true,
      search: false,
      align: 'center',
    },
  ];



  function onChangeRadio(e: Event) {
    // console.log('onChangeRadio :>> ', e?.target?.value);
    setDept(e?.target?.value)
  }

  return (
    <>
    <Row gutter={5}>
      <Col span={14}>
      <ProCard>
        <Space>
          <Button key="1" type="primary" onClick={() => setIsTeamOpen(true)}><PlusOutlined />
            创建团队账号
          </Button>
          <Button key="2" type="primary" onClick={handleCreate}><PlusOutlined />
            建档
          </Button>
        </Space>
        <Tabs
          defaultActiveKey="1"
          className='lightBg'
          style={{width:'100%'}}
          items={[
            {
              label: '团队列表',
              key: '2',
              children:
                <ProTable
                  columns={organizeColumns}
                  type={type as 'table'}
                  search={false}
                  actionRef={organizeRef}
                  request={(params): Promise<any> => reqOrganizeList(params)}
                  pagination={{ pageSize }}
                  rowKey='id'
                  dateFormatter="string"
                />,
            },
            {
              label: '患者列表',
              key: '1',
              children:
              <>
              <Search placeholder="请输入手机号" width={'100%'} allowClear onSearch={onSearch} enterButton="搜索" size="large" />
              <div style={{height:600,overflowY:'auto'}}>
              <List
                //className="demo-loadmore-list"
                itemLayout="horizontal"
                dataSource={searchResultData}
                renderItem={item => (
                  <List.Item
                    actions={[<a key="list-loadmore-edit" onClick={()=>showDrawer(item)}>挂号</a>]}
                  >
                    <div>
                    <div style={{float:'left'}}>
                    <Image src={item?.avatar} width={62} height={62} style={{boxSizing:'border-box',borderRadius:'4px',boxShadow:'0 2px 6px 0 rgba(0, 0, 0, .1)'}}></Image>
                    </div>
                    {/* <List.Item.Meta
                        avatar={<Avatar src={item?.avatar} />}
                        title={`${item?.name} / ${item?.gender==0?'男':'女'}`}
                        description={item?.phoneNum}
                    /> */}
                    <div style={{width:400,paddingLeft:10,float:'left'}}>
                        <p>{item?.name} / {item?.gender==0?'男':'女'}</p>
                        {item?.province}{item?.city}{item?.address}
                    </div>
                    </div>
                  </List.Item>
                )}
              />
              </div>
              </>
              ,
            },
            
          ]}
        />
        {
          isOpen ?
            <EditModal
              isOpen={isOpen}
              handleModal={handleModal}
              row={row}
              actionRef={actionRef}
              activeKey={activeKey}
            />
            : null
        }

        {
          isTeamOpen ?
            <TeamEditModal
              isOpen={isTeamOpen}
              handleModal={handleTeamOpenModal}
              row={row}
              actionRef={teamRef}
            />
            : null
        }
        <Drawer
          title={selAppointDate}
          placement='right'
          width={'90vw'}
          key='6'
          onClose={onCloseDrawer}
          open={drawerOpen}
          contentWrapperStyle={{
            transform: "translateX(0px) !important"
          }}
        >
          <div className={styles.list}>
            <div className={styles.deptClass}>
              {/* <Radio.Group
                optionType="button"
                value={dept}
                onChange={onChangeRadio}
              >
                <Radio value={1} >内科</Radio>
                <Radio value={2}>外科</Radio>
                <Radio value={3}>儿科</Radio>
              </Radio.Group> */}
            </div>
            <div style={{width:'1000',overflowX:'scroll',whiteSpace:'nowrap'}}>
              <div style={{width: doctorList?.length * 175}}>
              {
                doctorList?.map((item: any, index) => ( 
                  <div style={{width:'800',float:'left'}}>
                      <img height={100} src={item?.avatar} style={{borderRadius:'100%'}} />
                      <p>{item?.realName}</p>
                      <p>{item?.userLevel}</p>
                      <p style={{border:'1px solid #000',width:'165px',height:'165px'}}>
                        <p style={{fontSize:28,height:30,paddingTop:20}}>上午</p>
                        <p style={{fontSize:20,height:40,paddingTop:10}}>08:00-12:30</p>
                        <p style={{textAlign:'end',paddingRight:10}}>
                            <Popconfirm
                                title={`确认预约${selAppointDate} 08:00-12:30`}
                                onConfirm={()=>selCheck(item,'08:00-12:30')}
                                onCancel={()=>selCheck(null,'08:00-12:30')}
                                okText="确认"
                                cancelText="取消"
                              >
                                <a href="#"><PlusCircleOutlined/></a>
                              </Popconfirm>

                        </p>
                      </p>
                      <p style={{border:'1px solid #000',width:'165px',height:'165px'}}>
                        <p style={{fontSize:28,height:30,paddingTop:20}}>下午</p>
                        <p style={{fontSize:20,height:40,paddingTop:10}}>13:30-18:30</p>
                        <p style={{textAlign:'end',paddingRight:10}}>
                          <Popconfirm
                                title={`确认预约${selAppointDate} 13:30-18:30`}
                                onConfirm={()=>selCheck(item,'13:30-18:30')}
                                onCancel={()=>selCheck(null,'13:30-18:30')}
                                okText="确认"
                                cancelText="取消"
                              >
                              <a href="#"><PlusCircleOutlined/></a>
                          </Popconfirm>
                        </p>
                      </p>
                  </div>
                ))
              }
              </div>
            </div>
            <div style={{textAlign:'left',margin:'15px 0'}}>
              预约其它日期：<DatePicker ref={appointDt} onChange={onChange} format={"YYYY年MM月DD日"} disabledDate={disabledDate}/>
            </div>
            <div id='calendar'>
              <Drawer
                title=""
                placement='bottom'
                // closable={false}
                onClose={onCloseCalendar}
                open={calendarOpen}
                key="list"
                contentWrapperStyle={{
                  width: "90vw",
                  height: '600px'
                }}
                // getContainer={()=>document.querySelector("#calendar")}
                getContainer={false}
              >
                <>
                  {
                    doctorTimeList &&
                    doctorData?.appointDate &&
                    <div className={styles.doctorTimeList}>
                      <Space direction="vertical" size={40} >
                        <Button type="ghost" onClick={resetTime}>
                          <CloseOutlined />
                        </Button>

                        <ProCard title="日期" colSpan="100%" style={{textAlign:'left'}}>
                          <div>
                            <CheckCard.Group
                              value={currentDate}
                              onChange={onChangeCheckCard}
                            >
                              {
                                doctorDateArr?.map((item, index) => {
                                  return (
                                      <CheckCard
                                            key={index}
                                            title={item}
                                            value={item}
                                            style={{width:120}}
                                          />
                                  )
                                })
                              }
                            </CheckCard.Group>
                          </div>
                        </ProCard>
                        <Space size={20} wrap>
                          {
                            Array.isArray(doctorTimeList) && doctorTimeList?.length > 0 ?
                              doctorTimeList?.map((item: any, index: number) => (
                                <Badge.Ribbon
                                  key={index}
                                  text={item.status == 2 ? "已约满" : "可预约"}
                                  color={item.status == 2 ? "#9E9E9E" : "green"}
                                >
                                  <div
                                    className={classNames(styles.doctorTimeItem, { [styles.displayd]: item.status == 2 })}
                                    onClick={() => onSelectTime(item,'2024-08-08 12:00')}

                                  >
                                    {item?.timeSlot}
                                  </div>
                                </Badge.Ribbon>
                              ))
                              :
                              <Empty />
                          }
                        </Space>
                      </Space>
                    </div>
                  }
                  {/* <Calendar
                    headerRender={({ value, onChange }) => {
                      const start = 0;
                      const end = 12;
                      const monthOptions = [];
                      const current = value.clone();
                      const localeData = value.localeData();
                      const months = [];
                      for (let i = 0; i < 12; i++) {
                        current.month(i);
                        months.push(localeData.monthsShort(current));
                      }

                      for (let i = start; i < end; i++) {
                        monthOptions.push(
                          <Select.Option key={i} value={i} className="month-item">
                            {months[i]}
                          </Select.Option>,
                        );
                      }

                      const year = value.year();
                      const month = value.month();
                      const options = [];
                      for (let i = year - 10; i < year + 10; i += 1) {
                        options.push(
                          <Select.Option key={i} value={i} className="year-item">
                            {i}
                          </Select.Option>,
                        );
                      }
                      return (
                        <div style={{ padding: 8 }}>
                          <Row gutter={8}>
                            <Col>
                              <Select
                                dropdownMatchSelectWidth={false}
                                className="my-year-select"
                                value={year}
                                onChange={newYear => {
                                  const now = value.clone().year(newYear);
                                  onChange(now);
                                }}
                              >
                                {options}
                              </Select>
                            </Col>
                            <Col>
                              <Select
                                dropdownMatchSelectWidth={false}
                                value={month}
                                onChange={newMonth => {
                                  const now = value.clone().month(newMonth);
                                  onChange(now);
                                }}
                              >
                                {monthOptions}
                              </Select>
                            </Col>
                          </Row>
                        </div>
                      );
                    }}
                    onPanelChange={onPanelChange}
                    onSelect={onSelect}
                  /> */}
                </>
              </Drawer>
            </div>
          </div>
        </Drawer>
      </ProCard>
      </Col>
      <Col span={10}>
      <p style={{"padding":'5px',borderLeft:'3px solid red',marginTop:10}}>今日挂号</p>
      <Table 
            columns={columnsPending} 
            dataSource={searchTodayResultData}
          />
      </Col>
      </Row>
    </>
  );
};

